@import '~@/scss/GlobalVariables';

.news {
  border-radius: 4px;
  overflow: hidden;
  position: relative;

  @media all and (min-width: $tablet-width + 1) {
    top: 0;
    transition: all .3s ease;

    &:hover {
      box-shadow: 0 10px 24px $news-block-box-shadow-color;
      top: -10px;
    }
  }

  .news-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    width: 100%;
  }

  .news-text {
    background-color: $background-color-white;
    padding: 30px;
    padding-bottom: 20px;

    h4 {
      -webkit-box-orient: vertical;
      display: -webkit-box;
      height: 45px;
      -webkit-line-clamp: 2;
      margin-bottom: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    > p {
      -webkit-box-orient: vertical;
      color: $text-color-news-content;
      display: -webkit-box;
      height: 80px;
      -webkit-line-clamp: 4;
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .links {
      align-items: center;
      display: flex;
      margin-top: 30px;

      div {
        margin-left: auto;

        i {
          border: 1px solid $social-button-color-1;
          border-radius: 100px;
          color: $social-button-color-1;
          margin-left: 7px;
          text-align: center;

          &:hover {
            border: 1px solid $link-text-color-2;
            color: $link-text-color-2;
          }

          &.fa-facebook {
            padding: 4px 8px 4px 7px;
          }

          &.fa-twitter {
            padding: 4px 5px;
          }
        }
      }
    }
  }
}
